<template>
	<view>
		<view class="InfoBOX">
			<view class="Title">请设置您的支付密码</view>
			<view class="linhe"><text class="red">*</text>选择身份验证方式</view>
			<view class="Phone">
				<view class="">
					<view class="uni-form-item uni-column">
						<picker  @change="bindPickerChange" :range="array">	
							<label class="">{{array[index]}}:</label>
							[{{arrayNum[index]}}]
							<image src="@/static/images/bottsjxIco_03.png" mode="" class="bottsjxIco"></image>
						</picker>
					</view>
				</view>
				<!-- <view class="GetCode"> -->
					<view class="GetCode" :class="{'getactive':iscode}" @click="phone_code">
						{{getCode}}
					</view>
				<!-- </view> -->
			</view>
			<view class="linhe"><text class="red">*</text>请输入安全验证码</view>
			<view class="Code">
				<input maxlength="6"  type="number" v-model="auth_code" placeholder="请输入安全验证码"/>
			</view>
			<!-- <view class="linhe"><text class="red">*</text>请输入安全验证码	</view>
			<view class="Verification">
				<input type="text" value="" />
				<image src="" mode=""></image>
				<text>看不清？换一张</text>
			</view>-->
			<view class="Next" @click="Next()">
				确认，进入 下一步
			</view>
		</view>
		
		<view class="Tips">
			<view class="operation">操作提示</view>
			<view class="">
				1.请选择“绑定邮箱”或“绑定手机”方式其- -作为安全校验码的获取方式并正确输入。
			</view>
			<view class="">
				2.如果您的邮箱已失效，可以 <text class="bold">绑定手机</text>后通过接收手机短信完成验证。
			</view>
			<view class="">
				3.如果您的手机已失效，可以 <text class="bold">绑定邮箱</text>后通过接收邮件完成验证。
			</view>
			<view class="">
				4.请正确输入下方图形验证码，如看不清可点击图片进行更换，输入完成后进行下一步操作。
			</view>
			<view class="">
				5.收到安全验证码后，请在5分钟内完成验证。
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array:[],
				arrayNum:["",""],
				arrphone:[],
				index:0,
				getCode: "获取验证码",
				iscode: true,
				time: 60,
				type:"mobile",
				auth_code:"",
				pay_sn:""
			}
		},

		onShow() {
			this.GetInfo();
		},
		onLoad(e) {
			if(e.pay_sn){
			this.pay_sn=e.pay_sn;
			}
		},
		methods: {
			Next(){//进入下一步
				let that = this;
				console.log(that.auth_code)
				if(that.auth_code){
					this.$util.request({
							url: '/mobile/index.php?act=member_security&op=auth_submit',
							method: 'POST',
							data: {
								type:"pd_cash",
								auth_code:that.auth_code,
								},
						}).then(function(res) {
							console.log(res)
							if(res.error_code==0){

								uni.redirectTo({
									url:"NewPay?auth_modify_paypwd="+res.datas.time
								})
								// uni.navigateTo({								
								// 	url:"./NewPay?auth_modify_paypwd="+res.datas.time
								// })
							}else{
								uni.showToast({
									title:res.message,
									icon:"none"
								})
							}
							
						})
				}else{
					uni.showToast({
						title:"验证码不能为空",
						icon:"none"
					})
				}
			},
			GetInfo(){//获取用户信息
				let that = this;
				this.$util.request({
						url: '/mobile/index.php?act=member_index&op=getInfo',
						method: 'POST',
						data: {},
					}).then(function(res) {
						if(res.datas.member_info.member_mobile){
							that.arrphone[0]=res.datas.member_info.member_mobile;
							that.arrayNum.splice(0,1,that.Intercept(res.datas.member_info.member_mobile))
							that.array.splice(0,1,"手机")
							if(res.datas.member_info.member_email){
								that.arrphone[1]=res.datas.member_info.member_email;
								that.arrayNum.splice(1,1,that.Intercept(res.datas.member_info.member_email))
								that.array.splice(1,1,"邮箱")
							}
						}else{
							if(res.datas.member_info.member_email){
								that.arrphone[0]=res.datas.member_info.member_email;
								that.arrayNum.splice(0,1,that.Intercept(res.datas.member_info.member_email))
								that.array.splice(0,1,"邮箱")
							}
						}
						
						//需要设置验证方式
						if (that.array.length == 0) {
							
							uni.showModal({
								title: '请先绑定邮箱或者手机号',
								content: '用于找回密码',
								showCancel: false,
								confirmText: '确定',
								success: res => {
									uni.redirectTo({
										url:'./index'
									})
								}
							});
						}
						
						
						console.log(that.arrayNum);
					})
			},
			Intercept(String1){//字符串截取
				return String1.substring(0,3)+"***"+String1.substring((String1.length-4),String1.length)
			},
			//下拉框
			bindPickerChange: function(e) {	//改变的事件名
			let that=this;
				console.log('picker发送选择改变，携带值为', e.target.value)   //用于输出改变索引值
				this.index = e.target.value			//将数组改变索引赋给定义的index变量
				this.jg=this.array[this.index]		//将array【改变索引】的值赋给定义的jg变量
				if(this.index==0){
					that.type="mobile"
				}else if(this.index==1){
					that.type="email"
				}
			},
			phone_code() {
				// 发送状态
				let that = this;
				if (that.iscode) {
					that.iscode = false;
					this.$util.request({//获取验证码
							url: '/mobile/index.php?act=member_security&op=send_auth_code',
							method: 'get',
							data: {type:that.type},
						}).then(function(res) {
							if(res.error_code==0){
								let codesetInterval = setInterval(() => {
									that.time--;
									that.getCode = that.time + "秒后重新获取"
									if (that.time <= 0) {
										console.log(that.time)
										clearInterval(codesetInterval);
										that.getCode = "获取验证码";
										that.iscode = true;
										that.time=60;
									}
								}, 1000)
							}else{
								uni.showToast({
									title:res.message,
									icon:"none"
								})
								that.iscode = true;
							}
						})	
				} 
			}

		}
	}
</script>

<style>
	.getactive{
		background-color: #ff4300 !important;
	}
	.phone_code{
		font-size: 24rpx;
		line-height: 52rpx;
		width: 250rpx;
		
	}
	.bottsjxIco{
		width: 30rpx;
		height: 50rpx;
		vertical-align: middle;
		margin-left: 15rpx;
	}
	.uni-form-item{
		border: 0 !important;
		padding-left: 15rpx;
		display: flex;
		justify-content: space-between;
	}
	.red{
		color: red;
	}
	.linhe{
		line-height: 70rpx;
	}
	.InfoBOX{
		margin: 20rpx;
		padding: 15rpx 40rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		}
	.Title{
		font-size: 32rpx;
		text-align: center;
		}
	.Phone{
		display: flex;
	}
	.Phone view:nth-child(1){
		width: 330rpx;
		/* height: 70rpx; */
		border: 1rpx solid #EEEEEE;
	}
	.Phone .GetCode{
		color: #FFFFFF;
		line-height: 70rpx;
		width: 260rpx;
		font-size: 24rpx;
		text-align: center;
		background-color: #EEEEEE;
	}
	.Code{
		width: 100%;
		height: 70rpx;
		border: 1rpx solid #eee;
		margin: 10rpx 0;
	}
	.Code input{
		height: 70rpx;
		margin-left: 15rpx;
	}
	.Verification{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.Verification input{
		width: 210rpx;
		height: 70rpx;
		border: 1rpx solid #EEEEEE;
	}
	.Verification image{
		width: 170rpx;
		height: 50rpx;
	}
	.Verification text{
		color: #999999;
	}
	.Next{
		background-color: #ff4300;
		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 70rpx;
		margin: 25rpx 0;
		text-align: center;
	}
	.Tips{
		margin: 20rpx;
		color: #999999;
	}
	.Tips .operation{
		font-size: 30rpx;
		font-weight: bold;
	}
	.bold{
		font-weight: bold;
		color: #666666;
	}
/* 	.phone_code{
		
	} */
</style>
